import React from 'react'

import '../css/Nav.css';
import eventEmitter from '../components/event'
//引入公共组件

class Nav extends React.Component {
    constructor() {
        super()
        this.state = {
            list: [],
            relList: []
        }
    }
    //生命周期函数，组件完成挂载后执行，在此函数中
    //绑定一个事件，事件是直接绑定在组件上，尽管函数不调用，但此事件监听会被调用
    //监听到就从中取到数据，先对数据完成修改，在通过this.setState修改数据
    componentDidMount() {
        console.log('组件挂载完成');
        eventEmitter.addListener('sendMessageToNav', (message) => {
            this.state.list.push(message)
            this.setState({
                list: this.state.list
            })
            console.log(this.state.list);
        })
    }
    render() {
        return (
            <div className='Nav-box'>
                <ul>
                    {
                        this.state.list.map((item, index) => {
                                return <li key={index}>
                                    {item.content}
                                    <button onClick={() => {
                                        this.state.list.splice(index, 1)
                                        this.setState({
                                            list: this.state.list
                                        })
                                    }}>删除</button>
                                    <button onClick={() => {
                                        let newCon = prompt('请输入新内容')
                                        this.state.list = this.state.list.map((item, i) => {
                                            if (i == index) {
                                                item.content = newCon
                                            }
                                            return item
                                        })
                                        this.setState({
                                            list: this.state.list
                                        })
                                    }}>修改</button>

                                    {item.date}
                                </li>
                            


                        })
                    }
                </ul>
            </div>
        )
    }


}

export default Nav;